<template>
	<view class="content">
		<view class="Img">
			<image src="/static/img/yanjing.jpg" mode=""></image>
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<van-field label="用户名:" placeholder="请输入用户名" :value='zhanghao' @change='getzhanghao' />

			<van-field type='password' label="密码:" placeholder="请输入密码" :value='mima' @change='getmima' />
			<view class="anniu">
				<button type="warn" @click="ZhuCe">
					立即注册
				</button>
			</view>
		</form>


	</view>
</template>

<script>
	import {
		zhuce
	} from '../../../api/index.js';
	import {
		encrypt
	} from '/utils/cypto.js';
	export default {
		data() {
			return {
				zhanghao: '',
				mima: ''
			}
		},
		onLoad() {

		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content: '表单数据内容：' + JSON.stringify(formdata),
					showCancel: false
				});
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			ZhuCe() {
				zhuce({
					userName: this.zhanghao,
					passWord: encrypt(this.mima)
				}).then(res => {
					// uni.setStorageSync("token", res.data.data.accessToken)
					console.log(res, '成功')
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}).catch(err => {
					console.log(err, '失败')
				})
			},
			getzhanghao(event) {
				this.zhanghao = event.detail
			},
			getmima(event) {
				this.mima = event.detail
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Img {
		display: flex;
		justify-content: center;
		margin-top: 180rpx;

		image {
			width: 300rpx;
			height: 300rpx;

		}
	}

	.name {
		border-bottom: 1px solid gainsboro;
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		padding-bottom: 30rpx;

		input {
			margin-left: 100rpx;
		}
	}

	.mima {

		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		border-bottom: 1px solid gainsboro;
		padding-bottom: 30rpx;

		input {
			margin-left: 150rpx;
		}
	}

	.anniu {
		width: 500rpx;
		margin: 0 auto;
		margin-top: 80rpx;
	}
</style>